<template>
	<view class="myRentList">
		<view class="disFlex box">
			<view class="sAll">
				<checkbox-group @change="changeBook">
				  <label><checkbox  class="checkbox" color="#2291FF" value="1"  :checked="flag"/>全选</label>
				  </checkbox-group>
			</view>
			<view class="word" v-if="isClear" @tap="clear(0)">管理</view>
			<view class="word1" v-else @tap="clear(1)">取消</view>
		</view>
	<checkbox-group @change="checkboxChange">
		
			<view class="list" v-for="(v,i) in carArr" :key='i'>
				 <label><checkbox  class="checkbox" color="#2291FF" :value="v.id"  :checked="ischecked" /></label>
				<view class="info">
					<image :src="v.cover" mode=""></image>
					<view class="goodsInfo">
						<view class="name line1">{{v.title}}</view>
						<view class="remark line1">{{v.spec}}</view>
						<view class="priceBox ">
							<view class="price">{{v.price}}</view>
							<view class="btns">
								<button @tap="eidt('-',i)">-</button>
								<view class="nums">{{v.number}}</view>
								<button @tap="eidt('+',i)">+</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		
		</checkbox-group>
		<view class="bottom"  v-if="isClear">
			<view class="selectNums">已选（{{xz}}）</view>
			<button  @tap="pay">确定租赁</button>
		</view>
		<view class="bottom1" v-if="!isClear">
			<view class="selectNums">已选（{{xz}}）</view>
			<button  @tap="del" >移除清单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carArr:[],
				disabled:false,
				isClear:true,
				ischecked:true,
				flag:true,
				xz:'',
				id:[],
			}	
		},
		onLoad() {
		this.getlist()
		},
		methods: {
			getlist(i){
				this.http('/api/standard_order/get_rent', 'post', {}, )
					.then((res) => {
						this.carArr=res.data
						this.xz=this.carArr.length
						if(i!=1){
							this.id=[]
							this.carArr.forEach((v)=>{
							this.id.push(v.id)
							})
						}
						
					})
			},
			eidt(s,i){
				let num = this.carArr[i].number
				if(s =='-'&&num>1){
					num--
				}else if(s=='+'){
					num++
				}else{
					uni.showToast({
						title:'数量不能小于1',
						icon: 'none'
					})
					return
				}
				this.http('/api/standard_order/add_rent', 'post', {
						id: this.carArr[i].standard_id,
						number: num
					}, )
					.then((res) => {
						console.log(res)
						if(res.sta==200){
							this.carArr[i].number=num
						}else if(res.sta==4000){
							uni.showToast({
								title:res.msg,
								icon: 'none'
							})
						}
					})
			},
			
			changeBook (e) {
				if(e.detail.value.length== 1){
					this.flag=true
					this.ischecked=false
					setTimeout(()=>{
					this.ischecked=true
					},0.01)
					this.xz=this.carArr.length
					this.id=[]
					this.carArr.forEach((v)=>{
					this.id.push(v.id)
					})
				}else{
					this.flag=false
					this.ischecked=false
					this.xz=0
					this.id=[]
				}
				
			},
			// list checkbox
			checkboxChange (e) {
				console.log("变"+this.ischecked)
				this.xz=e.detail.value.length
				if(e.detail.value.length == this.carArr.length ){
					this.flag=true
					this.id=e.detail.value
				}else{
					this.flag=false
					this.id=e.detail.value
				}
				// console.log(this.id)
			},
			clear (type) {
				if(type==0){
					this.flag=false
					this.ischecked=false
					this.xz=0
					this.id=[]
				}else{
					this.flag=true
					this.ischecked=true
					this.xz=this.carArr.length
					this.id=[]
					this.carArr.forEach((v)=>{
					this.id.push(v.id)
					})
				}
				this.isClear = type;
			},
			del(){
				if (this.id.length == 0) {
					return uni.showToast({
						title:'请选择要删除的物品',
						icon:'none'
					})
				}
				let id=this.id.toString(',')
				this.http('/api/standard_order/del_rent', 'post', {id}, )
					.then((res) => {
						console.log(res)
						if(res.sta==200){
							uni.showToast({
								title:'删除成功',
								icon:'none'
							})
						this.getlist(1)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					})
			},
			pay(){
				if (this.id.length == 0) {
					return uni.showToast({
						title:'请选择要支付的物品',
						icon:'none'
					})
				}
				let ids=this.id.toString(',')
				
				this.getnav(this.router(`confirmRentOrder?id=${ids}`))
			}
		},
		// watch:{
		// 	flag:function(value){
		// 		console.log(this.id)
		// 		// if(!value){
		// 		// 	this.id=[]
		// 		// }
		// 	}
		// }
	}
</script>

<style lang="less">
	checkbox .wx-checkbox-input{
		border-radius: 50%;
	}
	checkbox .wx-checkbox-input.wx-checkbox-input-checked{
		border: 1px solid #007AFF;
		background: #007AFF;
		color: #fff!important;
	}
	.myRentList{
		padding: 0 40rpx;
		padding-bottom: 120rpx;
		.box{
			margin-top: 40rpx;
			.sAll{
				display: flex;
				align-items: center;
				.text{
					color: #1A191E;
					padding-left: 16rpx;
				}
			}
			.word{
				color: #2291FF;
			}
			.word1{
				color: #BEC9D7;
			}
		}
		.list{
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			.icon-xuanzhong{
				color: #2291FF;
			}
			.info{
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				image{
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
				.goodsInfo{
					flex: 1;
					height: 160rpx;
					padding-left: 28rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.name{
						font-weight: bold;
						font-size:32rpx;
					}
					.remark{
						font-size:24rpx;
						color:rgba(190,201,215,1);
					}
				}
				.priceBox{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.price{
						font-size: 36rpx;
						color: #FE7203;
						font-weight: bold;
						&:after{
							content: '/件/天';
							font-size: 24rpx;
							font-weight: normal;
						}
					}
					.btns{
						display: flex;
						align-items: center;
						button{
							width:44rpx;
							height:44rpx;
							background:rgba(245,245,249,1) !important;
							border-radius:10rpx;
							line-height: 44rpx;
							text-align: center;
						}
						.nums{
							width:100rpx;
							height:44rpx;
							background:rgba(245,245,249,1);
							border-radius:10rpx;
							line-height: 44rpx;
							text-align: center;
							margin: 0 10rpx;
						}
					}
				}
			}
		}
		.bottom,.bottom1{
			position: fixed;
			width: 100%;
			height: 98rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 99;
			bottom: 0;
			left: 0;
			background-color: #fff;
			box-shadow:0px -3px 6px rgba(104,148,185,0.2);
			// padding: 0 32rpx;
			button{
				flex: 1;
				font-size:32rpx;
				height:88rpx;
				line-height: 88rpx;
				background: #2291FF !important;
				color: #fff;
				outline: none;
				border: 0;
				border-radius: 0;
			}
			.selectNums{
				flex: 1;
				font-size:32rpx;
				font-weight:500;
				color:rgba(190,201,215,1);
				padding-left: 40rpx;
			}
		}
	}
</style>
